import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, PixelRatio, ScrollView } from "react-native";
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';
import Permission from '../utils/permission';

const scale = GLOBAL.SCALE;
export class ScrollTabView extends Component {
	static props = {}

	constructor(props) {
		super(props);
		let { tabName } = this.props;
		this.state = {
			text: ''
		}
	}

	componentWillReceiveProps (props) {
		let text = props.tabName || this.props.tabBarItems[0].text
		this.setState({ text })
	}

	render () {
		const tabBar = this.props.tabBarItems.map((item, index) => {
			const activeTab = (this.state.text == item.text) ? (this.props.tabBarUnderlineStyle ?
				{ borderBottomColor: this.props.tabBarUnderlineStyle, borderBottomWidth: 3 / PixelRatio.get() }
				: { borderBottomColor: style.color.themeColor, borderBottomWidth: 3 / PixelRatio.get() }) : null;

			const activeText = (this.state.text == item.text) ?
				(this.props.tabBarActiveColor ? { color: this.props.tabBarActiveColor } : { color: style.color.themeColor }) : null;
			return (
				<TouchableOpacity key={index}
					onPress={() => {
						// this.setState({ text: item.text });
						this.props.checkTab(item.text, item)
					}}
					activeOpacity={1}
					style={[styles.inactiveTab, this.props.inactiveTab, activeTab]}>
					<Text style={[styles.inactiveText, this.props.inactiveText,
					{
						color: (this.props.tabBarInactiveColor ? this.props.tabBarInactiveColor : '#404040')
					}, activeText]}>
						{item.text}
					</Text>
				</TouchableOpacity>
			);
		})

		return (
			<ScrollView showsHorizontalScrollIndicator={false} style={[styles.tabBarScroll, this.props.tabBarScroll]} horizontal={true}>
				<View style={[styles.tabBarContainer, this.props.tabBarContainer]}>

					{tabBar}

				</View>
			</ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	tabBarScroll: {
		flex: 1,
		position: 'relative',
		top: 0,
		left: 0,
		zIndex: 5,
	},
	tabBarContainer: {
		height: 50 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 18 * scale,
	},
	inactiveTab: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		height: 42 * scale,
		marginRight: 27 * scale,
		paddingLeft: 3 * scale,
		paddingRight: 3 * scale,
	},
	inactiveText: {
		fontSize: 12 * scale,
	}
})